<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多按钮事件</title>
	<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
    <div class="warp">
        <div class="toolbar"></div>
    </div>
</body>
<script src="./jquery-1.7.1.min.js"></script>
<script>
    $(function(){
        
        var toolbar = {
            show: true,
            backgroundColor: '#f8f9fc',
            color: "#111",
            height: "60px",
            width: "100%",
            btns: [
                {
                    id: 'btn1',
                    name: '按钮1',
                    icon: 'btn1',
                    isSwitch: true,
                    switchOn: false,
                    isShow: true,
                    disabled: true
                },
                {
                    id: 'btn2',
                    name: '按钮2',
                    icon: 'btn2',
                    isSwitch: true,
                    switchOn: false,
                    isShow: true,
                    disabled: true
                },
            ]
        };

        var toolbarHander = {
            // 渲染toolbar
            renderToolbarHtml: function(){
                if(toolbar && toolbar.show){
                    $(".toolbar").css({
                        "width": toolbar.width ? toolbar.width : '100%',
                        "height": toolbar.height ? toolbar.height : '40px',
                        "background-color": toolbar.backgroundColor ? toolbar.backgroundColor : '#acb2bf',
                        'color': toolbar.color ? toolbar.color : '#FFF',
                    }).show();

                    var toolbarHtml = '';
                    $(toolbar.btns).each(function () {
                        toolbarHtml += toolbarHander.renderButton(this);
                    });

                    $('.toolbar').html(toolbarHtml);
                    $('.toolbar').on('click', '.toolbar-item', function (e) {
                        var optionsString = $(this).attr('options'),
                            options = toolbarHander.optionsToJson(optionsString);
                        try {
                            __handler[options.id].call(this, e, options);
                        } catch (error) {
                            console.error(error);
                        }
                    });
                }else{
                    $(".toolbar").hide();
                }
            },


            /**
             * 渲染单个按钮
             * @param {object} btnOptions 
             */
            renderButton: function (btnOptions) {
                var hide = btnOptions.isShow === false ? ' item-hide' : '';
                var html = '',
                    css = '',
                    optonsString = toolbarHander.optionsToString(btnOptions);
                if (btnOptions.switchOn) {
                    css += 'toolbar-item-selected';
                }
                html += '<button title="' + btnOptions.name + '" id="toolbarItem_' + btnOptions.id + '" class="toolbar-item'+hide+' '+ css +' " options="' + optonsString + '">' +
                    '<i class="icon icon-' + btnOptions.icon + '"></i>' +
                    '<span class="">'+ btnOptions.name +'</span>' +
                    '</button>';
                return html;
            },

            /**
             * 根据按钮options刷新按钮
             * @param {object} options 
             * @param {string} groupName 
             */
            refreshButton: function (options) {
                var $button = $('#toolbarItem_'+ options.id);
                $button.replaceWith(function () {
                    return toolbarHander.renderButton(options);
                });
            },

            /**
             * 获取html中options数据，并转换成json格式输出
             * @param {string} options 
             */
            optionsToJson: function (options) {
                var self = this,
                    componentOptions = {},
                    params, indexFirstColon, key, value = '';
                if (options && options !== null && options !== '') {
                    $(options.split(";")).each(function(index, params) {
                        params = $.trim(params);
                        indexFirstColon = params.indexOf(':', 1);
                        key = params.substring(0, indexFirstColon);
                        if (key.length > 0) {
                            value = params.substring(indexFirstColon + 1, params.length);
                            if (value !== undefined && value === 'false') {
                                value = false;
                            }
                            if (value !== undefined && value === 'true') {
                                value = true;
                            }
                            componentOptions[key] = value;
                        }
                    });
                }
                return componentOptions;
            },

            /**
             * 将json格式的options转换成分号隔开的字符串
             * @param {object} options 
             */
            optionsToString: function (options) {
                var optionsString = '', 
                    options = options || {};
                for (var key in options) {
                    optionsString += `${key}:${options[key]};`
                }
                return optionsString;
            }

        };

        /**
         * 封装按钮处理方法，加'__'下划线，防止污染window全局
         * 回调方法key值必须是按钮id
         */
        var __handler = {

            /**
             * 按钮1
             */
            btn1: function (e, options){
                if (options.isSwitch) {
                    if (options.switchOn) {
                        options.switchOn = false;
                        options.name = 'btn1';
                        options.icon = 'btn2';
                    } else {
                        options.switchOn = true;
                        options.name = 'btn1关';
                        options.icon = 'btn1';
                    }
                    toolbarHander.refreshButton(options);
                }
            },

            /**
             * 按钮2
             */
            btn2: function (e, options){
                if (options.isSwitch) {
                    if (options.switchOn) {
                        options.switchOn = false;
                        options.name = 'btn2';
                        options.icon = 'btn1';
                    } else {
                        options.switchOn = true;
                        options.name = 'btn2关';
                        options.icon = 'btn2';
                    }
                    toolbarHander.refreshButton(options);
                }
            },
        }

        //渲染ToolbarHtml
        toolbarHander.renderToolbarHtml();
    })
</script>
</html>